<template>
  <div class="container">
    <van-list v-if="orderList.length" v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadList">
      <ul class="order-list">
        <li class="order-option" v-for="(item, index) in orderList" :key="index">
          <div class="top van-hairline--bottom">
            <span class="desc">申请时间</span>
            <span class="val">{{ item.createTime }}</span>
          </div>
          <ul class="content">
            <li>
              <span class="desc">订单编号</span>
              <span class="val">{{ item.id }}</span>
            </li>
            <li>
              <span class="desc">订单类型</span>
              <span class="val">{{ item.type === 1 ? '普通申请' : '推荐奖励' }}</span>
            </li>
            <li>
              <span class="desc">业务名称</span>
              <span class="val">{{ item.productName }}</span>
            </li>
            <li>
              <span class="desc">进度</span>
              <span class="val">{{ item.status === 1 ? '已申请' : item.status === 2 ? '已结算' : '申请失败' }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </van-list>
    <Empty v-else>
      <van-button class="empty-btn" color="#ff9100" round to="/">去申请</van-button>
    </Empty>
  </div>
</template>

<script>
import { Toast, Button, List } from 'vant';
import Empty from '@components/empty';

import { order_getOrderList } from '@api/user';
export default {
  components: {
    Empty,
    [List.name]: List,
    [Button.name]: Button
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      finished: false,
      loading: false,
      orderList: []
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    loadList() {
      this.pageNum++;
      this.getOrderList();
    },
    async getOrderList() {
      const { pageNum, pageSize } = this;
      let res = await order_getOrderList({ pageNum, pageSize });
      if (res.code === 200) {
        this.orderList = this.orderList.concat(res.data.list);
        this.loading = false;
        if (pageNum >= Math.ceil(res.data.totalNum / pageSize)) {
          this.finished = true;
        }
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-btn {
  width: 360px;
  font-size: 32px;
  font-weight: bold;
}
.ml20 {
  margin-left: 150px;
}
.order-list {
  padding: 15px;
}
.order-option {
  background: #fff;
  margin-bottom: 15px;
  border-radius: 10px;
  background: #fff;
  font-size: 26px;
  .top {
    position: relative;
    padding: 0 32px;
    line-height: 84px;
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -15px;
      left: 0;
      width: 5px;
      height: 30px;
      background: red;
    }
  }
  li {
    line-height: 54px;
  }
  .desc {
    width: 130px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    margin-right: 20px;
  }
  .val {
    font-weight: bold;
  }
  .content {
    padding: 15px 32px;
  }
}
</style>
